<template>
    <div>
        <h1>显示会员列表</h1>
        会员名称：
        <input type="text" v-model="dataquery.name">
        年龄区间查询：
        <input type="text" v-model="dataquery.agemin">-
        <input type="text" v-model="dataquery.agemax">
        时间查询
        <input type="date" v-model="dataquery.d1">-
        <input type="date" v-model="dataquery.d2">
        状态：
        <select name="" id="" v-model="dataquery.state">
            <option :value="null">请选择</option>
            <option :value="true">启用</option>
            <option :value="false">禁用</option>
        </select>
        会员等级：
        <select name="" id="" v-model="dataquery.levelid">
            <option value=0>请选择</option>
            <option v-for="a in dtxlk" :value=a.id>{{ a.levelTitle }}</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="重置" @click="" />
        <table class="table">
            <thead >
            <tr>
                <input type="checkbox" @change="qx" v-model="qxdata" >
                <td>编号</td>
                <td>会员名称</td>
                <td>会员密码</td>
                <td>性别</td>
                <td>生日</td>
                <td>手机号</td>
                <td>年龄</td>
                <td>新增时间</td>
                <td>状态</td>
                <td>会员等级编号</td>
                <td>头像</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
                <input type="checkbox" v-model="sjdata" :value="a.id" >
                <td>{{ a.id }}</td>
                <td>{{ a.name }}</td>
                <td>*****</td>
                <td>{{ a.sex?"男":"女" }}</td>
                <td>{{ moment(a.birthday ).format("YYYY-MM-DD") }}</td>
                <td>{{ a.phoneNumber }}</td>
                <td>{{ a.age }}</td>
                <td>{{moment(a.createDate ).format("YYYY-MM-DD") }}</td>
                <td>{{ a.state?"启用":"禁用" }}</td>
                <td>{{ a.memberLevelId }}</td>
                
                <td>
                    <img style="width: 100px;height: 100px;" :src="'https://localhost:7190/'+a.img">
                </td>
                <td> <input type="button" value="编辑" @click="GetUpt(a.id)"></td>
                <td>
            <input type="button" value="逻辑删除" @click="PlLogDel()" />
          </td>
            </tr>
        </tbody>
        </table>
       <input type="button" value="首页" @click="setindex(1)">
       <input type="button" value="上一页" @click="setindex(2)">
       <input type="button" v-for="a in pagedata.pagecount" :value="a" @click="setindex(a)">
       <input type="button" value="下一页" @click="setindex(3)">
       <input type="button" value="尾页" @click="setindex(4)">
       
       共{{pagedata.count  }}条，每页显示{{dataquery.size  }}条，第{{dataquery.index  }}页，共{{pagedata.pagecount  }}页
       <input type="text" v-model="dataquery.index ">
       <input type="button" value="跳转" @click="Shows">
       
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
import moment from "moment";
const router=useRouter
const data=ref([{
    "id": 0,
  "name": "string",
  "password": "string",
  "sex": 0,
  "birthday": "2025-04-02T12:08:43.312Z",
  "phoneNumber": "string",
  "age": 0,
  "isDelete": true,
  "createDate": "2025-04-02T12:08:43.312Z",
  "state": true,
  "memberLevelId": 0,
  "img": "string"
}])
const PlLogDel=()=>{
     if(confirm('确定逻辑删除吗'))
     axios.delete("https://localhost:7190/api/Member/PlLogDel",{params:{idstring:sjdata.value.toString()}}).then(res=>{
    
        if(res.data>0){
            alert('逻辑删除成功');
            Show();
        }
        else{
            alert('逻辑删除失败');
        }
    })
}

const qxdata=ref(false)
const sjdata=ref([])

const qx=()=>{
    if(qxdata.value){
        data.value.forEach(e=>{
            sjdata.value.push(e.id)
        })
    }
    else{
        sjdata.value=[]
    }
}
const Shows=()=>{
    Show()
}
const dataquery=ref({
    index:1,
    size:2,
    name:"",
    agemin:0,
    agemax:0,
    d1:"",
    d2:"",
    state:null,
    levelid:0,
})
onMounted(()=>{
    Show();
    Getshow();
   
})
const Getshow=()=>{
    axios.get("https://localhost:7190/api/Member/GetLevels").then(
        res=>{
            dtxlk.value=res.data; 
        }
    )
}
const dtxlk=ref([{
    "id": 0,
    "levelTitle": "",
    "state": true
}])

const pagedata=ref({
    count:0,
    pagecount:0
})
const Show=()=>{
    axios.get("https://localhost:7190/api/Member/GetMember",{params:dataquery.value}).then(res=>{
        data.value=res.data.data;
        pagedata.value.count=res.data.count;
        pagedata.value.pagecount=Math.ceil(pagedata.value.count/dataquery.value.size)
    })
}
const setindex=(val:any) =>{
    if(val==1){
        dataquery.value.index=1;
         Show()
    }
    if(val==4){
        dataquery.value.index=pagedata.value.pagecount;
        Show()
    }
    if(val==2){
        if(dataquery.value.index>1){
            dataquery.value.index-=1
            Show()
        }
     
    }
    if(val==3){
        if(dataquery.value.index<pagedata.value.pagecount){
            dataquery.value.index+=1
            Show()
        }
       
    }
    const GetUpt=(vid:any)=>{

     router.push({path:"/uptView",query:{id:vid}})
    }
}
</script>
<style scoped></style>